<template>
  <div>
    <div class="search-div">
        <el-form label-width="100px" label-position="right">
            <el-row>
              <el-col :span="7">
                  <el-form-item label="类目名称：">
                      <el-input v-model="query.className" size="mini"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="7">
                  <el-form-item label="ID：">
                      <el-input v-model="query.id" size="mini"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="2">
                  <div style="padding-top:7px">
                      <el-button type="primary" @click="queryBtn" size="mini">查询</el-button>
                  </div>
              </el-col>
              <el-col :span="2">
                  <div style="padding-top:7px">
                      <el-button type="primary" @click="addBtn" size="mini">添加</el-button>
                  </div>
              </el-col>
            </el-row>
        </el-form>
    </div>
    <div>
        <el-table
        :data="page.list"
        border
        style="width: 40%">
          <el-table-column
            prop="id"
            label="ID"
            width="100">
          </el-table-column>
          <el-table-column
            prop="className"
            label="类目名称"
            width="180">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="deleteHandleClick(scope.row, scope.$index)" type="text" size="small">删除</el-button>
              <el-button @click="editHandleClick(scope.row, scope.$index)" type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table> 

        <!--分页组件-->
        <div style="padding:20px;">
            <el-pagination
            align="right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.current"
            :page-sizes="pageSizes"
            :page-size="query.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.count">
            </el-pagination>
        </div>

    </div>
  </div>
</template>

<script>
import {addClass, deleteClass, updateClass,queryPageClass} from '@/server/index.js'
export default {
    components: {},
    data() {
       return {
         pageSizes:[10,20,30,50],
         page:{
           pageSize:10,
           pageNo:1,
           list:[],
           count:0
         },
         query:{
           size:10,
           current:1,
           className:'',
           id:null
         },
       };
    },
    methods: {
      deleteHandleClick:function(rowData,index){
          deleteClass({id:rowData.id}).then(()=>{
            this.page.list.splice(index,1);
            this.$message.success("删除成功");
          }).catch(()=>{
            this.$message.error("系统错误，删除失败");
          });
      },
      editHandleClick:function(rowData,index){
            this.$prompt('请输入需改后类目名', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            }).then(({ value }) => {
              updateClass({id:rowData.id,className:value}).then(()=>{
                this.page.list[index].className = value;
                this.$message.success("修改成功");
              }).catch(()=>{
                this.$message.error("系统错误，修改失败");
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '取消输入'
              });       
            });
      },
      handleSizeChange (pageSize) {
          // 改变数据条数
          this.query.size = pageSize;
          this.queryPage();
      },
      handleCurrentChange (pageNo) {
          // 改变页数
          this.query.current = pageNo;
          this.queryPage();
      },
      queryBtn:function(){
        // 查询操作
          this.queryPage();
      },
      addBtn:function(){
        // 添加类目
         this.$prompt('请输入添加类目名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          }).then(({ value }) => {

            addClass({className:value}).then(()=>{
              this.$message.success("添加成功");
              this.queryPage();
            }).catch(()=>{
              this.$message.error("系统错误，删除失败");
            });
            
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            });       
         });
      },
      queryPage(){
        queryPageClass(this.query).then((res)=>{
            this.page.list = res.data.records;
            this.query.size = res.data.size;
            this.page.count = res.data.total;
        });
      }
    },
    created() {
      this.queryPage();
    }
};
</script>

<style scoped>

</style>